<template>
	<div class="scenic">
		<h1>景区预约列表</h1>
		<div class="content" v-if="isShow">
			<el-row>
				<el-button type="primary" @click="addScenic">新增预约</el-button>
			</el-row>
			<el-table :data="tableData" style="width: 100%">
				<el-table-column label="名称">
					<template slot-scope="scope">
						<span>{{ scope.row.name }}</span>
					</template>
				</el-table-column>
				<el-table-column label="图片">
					<template slot-scope="scope">
						<img :src="baseUrl+scope.row.img_url" width="100px">
					</template>
				</el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-button size="mini" @click="ascend(scope.$index, scope.row)">上升</el-button>
						<el-button size="mini" @click="descend(scope.$index, scope.row)">下降</el-button>
						<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
						<el-button size="mini" type="danger" @click.native.prevent="deleteRow(scope.$index, tableData)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>

		<!--预约景点-->
		<div class="content" v-else="isShow">
			
			<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
				<el-form-item label="名称" prop="name">
					<el-input v-model="ruleForm.name"></el-input>
				</el-form-item>
				<!--	上传图片-->
				<el-form-item label="图片">
					<el-upload class="upload-demo" ref="upload" action="https://jsonplaceholder.typicode.com/posts/" :limit="1" :file-list="fileList" :auto-upload="false" :on-change='changeUpload' accept="image/jpeg,image/gif,image/png,image/bmp">
						<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
						<el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
						<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，每次只能上传一张,最大不超过5mb</div>
					</el-upload>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="submitForm('ruleForm')">立即提交</el-button>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script>
	import config1 from "@/assets/js/config1.js";
	import config from "@/assets/js/config.js";
	export default {
		data() {
			return {
				page: 0,
				id: 0,
				baseUrl: config1.baseUrl,
				tableData: [{
					name: '',
					img_url: ''
				}],
				ruleForm: {
					name: '',
					region: ''
				},
				rules: {
					name: [{
							required: true,
							message: '请填写名称',
							trigger: 'blur'
						},

					]
				},
				fileList: [],
				isShow: true,
				updateImg: config.uploadImage,
				formData: new FormData()

			}
		},
		methods: {
			descend(index, rows) {
				//降序

				console.log(rows.orders)
				this.$require.post(config.sortScenic, {
					move: -1,
					orders: rows.orders,
				}, {
					header: {
						Authorization: "Bearer " + this.$store.state.token
					}
				}).then((res) => {
					console.log(res)
				})
			},
			ascend(index, rows) {
				//升序

				console.log(rows.orders)
				this.$require.post(config.sortScenic, {
					move: 1,
					orders: rows.orders,
				}, {
					header: {
						Authorization: "Bearer " + this.$store.state.token
					}
				}).then((res) => {
					console.log(res)
				})
			},
			submitUpload() {
				this.$refs.upload.submit();
				this.$notify({
					title: '',
					message: '上传成功',
					type: 'success'
				});
			},
			handleEdit(index, rows) {
				//跳到编辑页面传参
				let id = rows[index]
				console.log(rows.id)
				console.log(rows)
				this.$router.push({
					path: '/scenicedit',
					query: {
						id: rows.id,
						list: rows
					}
				})
			},
			//删除
			deleteRow(index, rows) {
				this.$require.post(config.delScenic, {
					id: rows[index].id
				}, {
					headers: {
						Authorization: "Bearer " + this.$store.state.token
					}
				}).then((res) => {

				})
				rows.splice(index, 1);
			},
			//立即上传渲染页面
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if(valid) {
						this.isShow = !this.isShow
						this.$require.post(config.scenic, {
							name: this.ruleForm.name,
							img_url: this.img_url
						}, {
							headers: {
								Authorization: "Bearer " + this.$store.state.token
							}
						}).then((res) => {
							console.log(res.data.data.orders)
							this.orders = res.data.data.orders
						})
					} else {
						return false;
					}
				});

			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
			},
			addScenic() {
				this.isShow = !this.isShow
			},
			//上传
			changeUpload(file, fileList) {
				console.log(this.$store.state.token)
				console.log(file, fileList);
				console.log(file.raw.name);
				var formData = new FormData();
				formData.append("files", file.raw);
				this.$require.post(config.uploadImg, formData, {
					headers: {
						Authorization: "Bearer " + this.$store.state.token
					}
				}).then((res) => {
					console.log(res)
					this.img_url = res.data.data.img_url;
				})

			},
		},
		created() {
			this.$require.get(config1.reserScenicList, {
				parmas: {
					page: this.page
				}
			}).then((res) => {
				console.log(res);
				this.tableData = res.data.data.rows;

			})

		}

	}
</script>

<style lang="scss" scoped="scoped">
	$htitle:32px; //标题文字大小
	.el-table .cell {
		white-space: nowrap;
	}
	
	.scenic {
		padding: 0 30px;
	}
	
	.el-row {
		margin-bottom: 20px;
		&:last-child {
			margin-bottom: 0;
		}
	}
	
	.el-col {
		border-radius: 4px;
	}
	
	.el-table td,
	.el-table th {
		padding: 12px 0;
	}
	
	.el-button--mini,
	.el-button--mini.is-round {
		padding: 12px 20px;
	}
	
	h1 {
		font-size: $htitle;
		margin: 21px 0;
	}
	
	a {
		margin: 0 10px;
	}
</style>